<template>
	<view>
		<!-- 顶部订单状态 -->
		<view class="head">
			<view v-for="item in order_state" :key="item.id" :data-index="item.id" @click="getId"
				:class="item.isActive?'isActive':''">{{item.name}}</view>
		</view>
		<!-- 占位 -->
		<view style="height: 8vw;"></view>
		<!-- 商品订单 -->
		<view class="body" v-for="item in displayList" :key="item.id">
			<!-- 订单号 -->
			<view class="body-head">
				<view>订单号:{{item.id}}</view>
				<view v-if="item.state==1">等待付款</view>
				<view v-else-if="item.state==2">等待发货</view>
				<view v-else-if="item.state==3">等待收货</view>
				<view v-else-if="item.state==4">等待评价</view>
			</view>
			<!-- 中间图片和介绍 -->
			<view class="body-middle" @click="detail" :data-order="item">
				<!-- 左边图片 -->
				<view class="body-middle-left">
					<image :src="item.src"></image>
				</view>
				<!-- 右边介绍 -->
				<view class="body-middle-right">
					<!-- 商品名 -->
					<view class="body-middle-right-name">{{item.name}}</view>
					<view class="body-middle-right-price">
						<view class="body-middle-right-price1">￥{{item.price}}</view>
						<view class="body-middle-right-price2">×{{item.num}}</view>
					</view>
				</view>
			</view>
			<!-- 下方总价 -->
			<view class="body-bottom">共一件商品 合计：￥{{item.price*item.num+10}}（运费：￥10.0）</view>
			<!-- 下方操作按钮 -->
			<view class="button">
				<block v-if="item.state==1">
					<view class="button1" @click="cancle" :data-id="item.id">取消订单</view>
					<view class="button2" @click="fukuan">付款</view>
				</block>
				<block v-if="item.state==2">
					<view class="button1">联系卖家</view>
					<view class="button2" :data-index="index" @click="urge" v-if="item.cuidan==false">催单</view>
					<view class="button2" :data-index="index" @click="urge" v-if="item.cuidan==true">已催单</view>
				</block>
				<block v-if="item.state==3">
					<view class="button1">联系商家</view>
					<view class="button1" @click="peisong">配送信息</view>
					<view class="button2" :data-id="item.id" @click="shouhuo">确认收货</view>
				</block>
				<block v-if="item.state==4">
					<view class="button1">联系商家</view>
					<view class="button1" @click="peisong">配送信息</view>
					<view class="button2" @click="pingjia">评价</view>
				</block>
			</view>
		</view>
		<view class="foot">· 到底了 ·</view>
	</view>
</template>

<script>
	var that
	var orderList=getApp().globalData.dingdanList
	export default {
		data() {
			return {
				order_state: [{
						id: 0,
						name: "全部",
						isActive: true
					},
					{
						id: 1,
						name: "待付款",
						isActive: false
					},
					{
						id: 2,
						name: "待发货",
						isActive: false
					},
					{
						id: 3,
						name: "待收货",
						isActive: false
					},
					{
						id: 4,
						name: "待评价",
						isActive: false
					}
				],
				displayList: [],
				index:0
			};
		},
		methods: {
			getId(e) {
				this.displayList = []
				let {index}=this
				index = e.currentTarget.dataset.index
				this.order_state.forEach((v, i) => i == index ? v.isActive = true : v.isActive = false);
				if (index == 0) {
					this.displayList =orderList
				} else {
					for (var i = 0; i < orderList.length; i++) {
						let str = orderList[i].state
						if (index == str) {
							this.displayList.push(orderList[i])
						}
					}
				}
			},
			detail(e) {
				let order = e.currentTarget.dataset.order
				wx.navigateTo({
					url: "../../other_pages/dingdan_detail/dingdan_detail?orderId=" + order.id
				})
			},
			fukuan(){
				wx.navigateTo({
					url: "../../other_pages/dingdan_detail/firm_order"
				})
			},
			cancle(e) {
				that = this
				let id = e.currentTarget.dataset.id
				wx.showModal({
					title: '取消订单',
					content: '确定要取消该订单吗？',
					success(res) {
						if (res.confirm) {
							setTimeout(function() {
								wx.showToast({
									title: '取消成功',
									icon: 'success',
									duration: 1000
								});
							}, 100)
							that.displayList.forEach((v,i) =>{if(v.id==id){that.displayList.splice(i, 1)}})
						}
					}
				})
			},
			shouhuo(e){
				that = this
				let id = e.currentTarget.dataset.id
				wx.showModal({
					title: '确认收货',
					content: '是否确认收货？',
					success(res) {
						if (res.confirm) {
							setTimeout(function() {
								wx.showToast({
									title: '收货成功',
									icon: 'success',
									duration: 1000
								});
							}, 100)
							orderList.forEach((v,i) =>{if(v.id==id){v.state=4}})
							that.displayList=[]
							orderList.forEach((v,i) =>{if(v.state==3){that.displayList.push(v)}})
						}
					}
				})
			},
			urge(e) {
				let index=e.currentTarget.dataset.index
				that=this
				let dingdan=this.displayList[index]
				if(dingdan.cuidan==false){
					wx.showToast({
							title: '催单成功',
							icon: 'success',
							duration: 1000
						})
						setTimeout(function() {
							wx.showToast({
								title: '商家已收到',
								icon: 'success',
								duration: 1500
							});
						dingdan.cuidan=true
						}, 1300)
				}
			},
			peisong() {
				wx.navigateTo({
					url: "../../other_pages/peisong_detail/peisong_detail"
				})
			},
			pingjia(){
				wx.navigateTo({
					url: "../../other_pages/pingjia/pingjia"
				})
			}
		},
		onLoad: function (option){
			this.displayList = orderList
		},
		onShow() {
			this.displayList = orderList
			this.index=0
			this.order_state.forEach((v, i) => i == this.index ? v.isActive = true : v.isActive = false);
		}
	}
</script>

<style lang="scss">
	.head {
		width: 100vw;
		height: 8vw;
		display: flex;
		position: fixed;
		justify-content: space-between;
		padding: 2vw 4vw;
		box-sizing: border-box;
		font-size: 3.5vw;
		border-bottom: 1px solid #ffffff;
		border-top: 1px solid #ffffff;
		z-index: 10;
		background-color: #c8d5f8;
	}

	.isActive {
		color: #927cff;
		font-weight: 550;
	}

	.body {
		font-size: 13px;
		padding: 2vw 2vw 2vw 5vw;
		margin: 1vw 0 1vw 0;
		background-color: #dfe8ff9e;
	}

	.body-head {
		display: flex;
		justify-content: space-between;
		margin: 0 0 3vw 0;
	}

	.body-middle {
		display: flex;
	}

	.body-middle-left image {
		margin-right: 5vw;
		width: 20vw;
		height: 20vw;
	}

	.body-middle-right-name {
		width: 70vw;
		height: 10vw;
	}

	.body-middle-right-price {
		width: 70vw;
		height: 10vw;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.body-middle-right-price1 {
		font-size: 4vw;
		font-weight: 700;
	}

	.body-middle-right-price2 {
		margin: 0 2vw 0 0;
	}

	.body-bottom {
		margin: 2vw 0;
		text-align: right;
		font-size: 3.5vw;
	}

	.button {
		display: flex;
		justify-content: flex-end;
		font-size: 3vw;
	}

	.button1 {
		// width: 10vw;
		margin: 1vw 2vw 0 1vw;
		border-radius: 10px;
		color: #ff7979;
		padding: 1vw 3vw 1vw 3vw;
		background-color: #FEF3ED;
	}

	.button2 {
		// width: 10vw;
		margin: 1vw 2vw 0 1vw;
		border-radius: 15px;
		color: #FE0302;
		padding: 1vw 3vw 1vw 3vw;
		background-color: #fecaca;
	}

	.foot {
		padding: 2vh 0;
		text-align: center;
		margin: 0 auto;
		font-weight: 700;
	}
</style>
